<template>
  <div class="h-all flex fd-c">
    <div class="fs-20 flex nodarg ra-10 mr10 ai-c">
      <Select placeholder="年级" @change="initData(1)" clear class="w-100 b-0 hand fs-15 h-35" :data="nianji" v-model="query.grade"></Select>
      <!-- <Select placeholder="单元" @change="initData(1)" clear class="w-100 b-0 hand fs-15 ml10 h-35" :data="unitList" v-model="query.unit"></Select> -->
      <Select placeholder="上下册" @change="initData(1)" clear class="w-90 b-0 hand fs-15 ml10 h-35" :data="['上册','下册']" v-model="query.volume"></Select>
      <span class="flex-1"></span>
      <page @change="initData" :size="query.size" :total="query.total" :page="query.page"></page>
    </div>
    <div class="w-all mt10 flex-1 nodarg">
      <scroll>
        <div class="w-all pt10 pb10 pr15 flex fw ">
          <div v-for="item in list" @click="landu(item)" class="flex hand nodarg w-250 h-250 chi-bg bs-c pt10 fd-c ai-c jc-c mb10 ml10 ra-10 ">
            <!-- <div class="fs-30">{{item.pinyin}}</div> -->
            <div style="font-size:130px" class="fs-99 fw-5 fc-FF4500">{{item.w}}</div>
          </div>
        </div>
      </scroll>
    </div>
  </div>
</template>

<script setup lang='ts'>
// https://juejin.cn/post/7308956568333336639?from=search-suggest
import { ref, reactive, nextTick } from 'vue';
import yy from '@lib/mixin';
import useStore from '../../store';
import word from '../../assets/yuwen/shenzhi.ts';
const st = useStore();

const nianji = ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
const unitList = ['一单元', '二单元', '三单元', '四单元', '五单元', '六单元']

const list = ref([]);

const info = reactive({
  list: [],
  playAudio: null,
})

const query = reactive({
  grade: '一年级',
  unit: '一单元',
  volume: '上册',
  page: 1,
  size: 50,
  serch: '',
  total: 0
})

function initData() {
  list.value = word.find(v => v.title == query.grade).word.find(v => v.che == query.volume).desc;
}

initData();

function landu(item) {
  let src = `https://hanyu-word-pinyin-short.cdn.bcebos.com/${item.fy}${item.sd}.mp3`;
  if (info.playAudio) {
    info.playAudio.pause();
    info.playAudio = null;
  }


  info.playAudio = new Audio(src);
  info.playAudio.crossOrigin = 'anonymous';
  info.playAudio.referrerPolicy = 'no-referrer';
  info.playAudio.volume = 1;
  info.playAudio.play()
}

</script>

<style lang='less'>
.b-0 {
  border: 0;
}
.chi-bg {
  border: 2px solid #47ce7c;
  background-image: url("");
}
</style>